<script setup>
import { ref } from 'vue'
import { onMounted } from 'vue'
import JobDetail from './components/JobDetail.vue'
import bossAvatar from '@/assets/recommend/boss_avatar.png'
const companyIndustry = ref([
  {
    id: 1,
    title: '互联网/IT',
    list: [
      '互联网',
      '电子商务',
      '计算软件',
      '生活服务(O2O)',
      '企业服务',
      '医疗健康',
      '游戏',
      '社交网络与媒体',
      '人工智能',
      '云计算',
      '在线教育',
      '计算机服务',
      '大数据',
      '广告营销',
      '物联网',
      '新零售',
      '信息安全'
    ]
  },
  {
    id: 2,
    title: '电子/通信/半导体',
    list: [
      '半导体/芯片',
      '电子/硬件开发',
      '通信/网络设备',
      '智能硬件/消费电子',
      '运营商/增值服务',
      '计算机硬件',
      '电子/半导体/集成电路'
    ]
  },
  {
    id: 3,
    title: '服务业',
    list: [
      '餐饮',
      '美容',
      '美发',
      '酒店/民宿',
      '休闲/娱乐',
      '运动/健身',
      '保健/养身',
      '家政服务',
      '旅游/景区',
      '婚庆/摄影',
      '宠物服务',
      '回收/维修',
      '美容/美发',
      '其他生活服务'
    ]
  }
])
const expectJob = ref('前端/移动开发')
const city = ref('东莞')
const jobRecommend = ref([
  {
    id: 1,
    jobName: '前端开发工程师',
    jobSalary: '15k-30k薪',
    tagList: ['经验不限', '本科', 'JavaScript', 'Vue.js'],
    companyLogo: '@/assets/recommendPage/华为logo.jpg',
    companyName: '华为',
    companyLocation: '东莞·南城街道·汇一城',
    active: false,
    jobLabelList: [
      '技术博客/开源项目有所贡献',
      '不接受居家办公',
      'JavaScript',
      'HTML5',
      'Vue',
      '计算机/软件工程相关专业',
      '架构师经验'
    ],
    jobDescription:
      '<style>.YpDzjDZpdNk{display:none!important;}.zMQpWWxXSWNi{display:none!important;}.DDchaAXCsiZ{display:none!important;}.mPQdtyseGZ{display:none!important;}.CMdNdYjPYDY{display:none!important;}.jRDxGDWsn{font-style:normal;font-weight:normal}.YtimYPFXSi{font-style:normal;font-weight:normal}.MsAcshWBXj{font-style:normal;font-weight:normal}.xBsYnhiYNba{font-style:normal;font-weight:normal}.exYEmeKT{font-style:normal;font-weight:normal}</style>【<span class="jRDxGDWsn">岗</span>位职责】<br/><br/><br/>1.完成从<span class="YpDzjDZpdNk">直聘</span>客户需求到软件产品定义、架构设<span class="mPQdtyseGZ">kanzhun</span>计、开<span class="xBsYnhiYNba">发</span>实现、再到上线运营维护等产品<span class="mPQdtyseGZ">kanzhun</span>生命周期中的各个环节;<br/>2. 创造性解决产品在实现过程中的技术难题应用前沿技术提升产品的核心竞争力,如分布式系统、性能调优、可靠性、数据库等;<br/>3.有机会参与业界前沿技术研究和规划,与全球专家一起工作、交流，构建华为在业界影响力。<br/><br/><br/>【岗位要求】<br/><br/><br/>1. 熟练掌握HTML5 / CSS / JavaScript 等Web开发技能；<br/>2. 熟练掌握目前主流的前端开发框架至少一种：如ReactJS、VueJS、Angular等，熟悉组件化开发，有NodeJS开发经验者优先；<br/>3. 对Web性能和安全有较深的见解和相关处理方案优先；<br/>4. 具有很强的学习能力和技术敏感度，有强烈的责任心和进取心，乐于学习和技术分享。<br/><br/><br/>【在技术上可以学到什么】<br/>1、有很多平台、服务等待开发，机遇多，不用担心英雄无用武之地；<br/>2、有很多技术专家和业务专家，不用担心个人的成长；<br/>3、有机会跟全球TOP级别的公司进行直接沟通；<br/>4、华为先进的培养制度协助快速上手；<br/>5、华为成熟规范的软件开发流程能大幅提升您的代码规范能力。',
    companyBoss: {
      bossName: '张三',
      bossAvatar: bossAvatar,
      bossDescription: '华为 · Recruiter'
    },
    jobAddress: '东莞汇一城3号楼2211',
    companyMap: '@/assets/recommend/mapImage.png'
  },
  {
    id: 2,
    jobName: '安卓开发工程师',
    jobSalary: '15k-30k薪',
    tagList: ['3-5年', '大专', 'Android客户端产品研发'],
    companyLogo: '@/assets/recommendPage/华为logo.jpg',
    companyName: '华为',
    companyLocation: '东莞·大朗镇·松山湖',
    active: false,
    jobLabelList: [
      'Java',
      'Android开发经验',
      '通信相关专业',
      '架构设计优化',
      'Android客户端产品研发',
      '研发流程优化',
      '计算机/软件工程相关专业'
    ],
    jobDescription: '',
    companyBoss: {
      bossName: '李四',
      bossAvatar: bossAvatar,
      bossDescription: '华为技术有限公司 · 招聘助理'
    },
    jobAddress: '广东省东莞市松山湖华为基地'
  },
  {
    id: 3,
    jobName: '安卓开发工程师',
    jobSalary: '15k-30k薪',
    tagList: ['3-5年', '大专', 'Android客户端产品研发'],
    companyLogo: '@/assets/recommendPage/华为logo.jpg',
    companyName: '华为',
    companyLocation: '东莞·大朗镇·松山湖',
    active: false
  },
  {
    id: 4,
    jobName: '安卓开发工程师',
    jobSalary: '15k-30k薪',
    tagList: ['3-5年', '大专', 'Android客户端产品研发'],
    companyLogo: '@/assets/recommendPage/华为logo.jpg',
    companyName: '华为',
    companyLocation: '东莞·大朗镇·松山湖',
    active: false
  },
  {
    id: 5,
    jobName: '安卓开发工程师',
    jobSalary: '15k-30k薪',
    tagList: ['3-5年', '大专', 'Android客户端产品研发'],
    companyLogo: '@/assets/recommendPage/华为logo.jpg',
    companyName: '华为',
    companyLocation: '东莞·大朗镇·松山湖',
    active: false
  },
  {
    id: 6,
    jobName: '安卓开发工程师',
    jobSalary: '15k-30k薪',
    tagList: ['3-5年', '大专', 'Android客户端产品研发'],
    companyLogo: '@/assets/recommendPage/华为logo.jpg',
    companyName: '华为',
    companyLocation: '东莞·大朗镇·松山湖',
    active: false
  },
  {
    id: 7,
    jobName: '安卓开发工程师',
    jobSalary: '15k-30k薪',
    tagList: ['3-5年', '大专', 'Android客户端产品研发'],
    companyLogo: '@/assets/recommendPage/华为logo.jpg',
    companyName: '华为',
    companyLocation: '东莞·大朗镇·松山湖',
    active: false
  },
  {
    id: 8,
    jobName: '安卓开发工程师',
    jobSalary: '15k-30k薪',
    tagList: ['3-5年', '大专', 'Android客户端产品研发'],
    companyLogo: '@/assets/recommendPage/华为logo.jpg',
    companyName: '华为',
    companyLocation: '东莞·大朗镇·松山湖',
    active: false
  },
  {
    id: 9,
    jobName: '安卓开发工程师',
    jobSalary: '15k-30k薪',
    tagList: ['3-5年', '大专', 'Android客户端产品研发'],
    companyLogo: '@/assets/recommendPage/华为logo.jpg',
    companyName: '华为',
    companyLocation: '东莞·大朗镇·松山湖',
    active: false
  },
  {
    id: 10,
    jobName: '安卓开发工程师',
    jobSalary: '15k-30k薪',
    tagList: ['3-5年', '大专', 'Android客户端产品研发'],
    companyLogo: '@/assets/recommendPage/华为logo.jpg',
    companyName: '华为',
    companyLocation: '东莞·大朗镇·松山湖',
    active: false
  }
])

// 动态使工作推荐卡片的job_card_box样式生效

//第一个工作
const firstJob = jobRecommend.value[0]
onMounted(() => {
  firstJob.active = true
})
//更改点击卡片样式
var currentJob = firstJob
const changeCardBoxActive = (item) => {
  if (currentJob) {
    currentJob.active = false
  }
  // 添加激活样式到当前点击的li标签
  item.active = true
  // 更新当前激活的li标签
  currentJob = item
}
//点击已期望的职业和城市切换相应的工作推荐信息
const cityBtnShow = ref(true)
const showCityJob = (result) => {
  cityBtnShow.value = result
}
</script>

<template>
  <div class="main">
    <div class="header">
      <div class="header_continer wrapper">
        <div class="header_up">
          <div @click="showCityJob(true)" class="recommend_title">推荐职位</div>
          <div @click="showCityJob(false)" href="" class="recommend_job_btn">
            <span class="content_text">{{ expectJob }}({{ city }})</span>
          </div>
          <div class="expect_btn">
            <Plus
              style="width: 1em; height: 1em; margin-right: 8px"
            />添加求职期望
          </div>
          <div class="search_expand_btn">
            <Filter
              style="width: 1em; height: 1em; margin-right: 8px; color: #6f9edf"
            />
            <span class="btn_text">筛选</span>
          </div>
        </div>
        <div class="header_down">
          <div class="header_down_left">
            <div v-if="cityBtnShow" class="city_label">
              <Location
                style="
                  width: 1em;
                  height: 1em;
                  margin-right: 8px;
                  color: #6f9edf;
                "
              />
              <span class="city_name">{{ city }}</span>
            </div>
            <div class="el_drowdown_list">
              <el-dropdown>
                <div class="el_dropdown_btn">
                  求职类型<el-icon class="el-icon--right"
                    ><arrow-down
                  /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>不限</el-dropdown-item>
                    <el-dropdown-item>全职</el-dropdown-item>
                    <el-dropdown-item>兼职</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-dropdown>
                <div class="el_dropdown_btn">
                  薪资待遇<el-icon class="el-icon--right"
                    ><arrow-down
                  /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>不限</el-dropdown-item>
                    <el-dropdown-item>3k以下</el-dropdown-item>
                    <el-dropdown-item>3-5k</el-dropdown-item>
                    <el-dropdown-item>5-10k</el-dropdown-item>
                    <el-dropdown-item>10-20k</el-dropdown-item>
                    <el-dropdown-item>20-50k</el-dropdown-item>
                    <el-dropdown-item>50k以上</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-dropdown>
                <div class="el_dropdown_btn">
                  工作经验<el-icon class="el-icon--right"
                    ><arrow-down
                  /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>不限</el-dropdown-item>
                    <el-dropdown-item>在校生</el-dropdown-item>
                    <el-dropdown-item>应届生</el-dropdown-item>
                    <el-dropdown-item>经验不限</el-dropdown-item>
                    <el-dropdown-item>1年以内</el-dropdown-item>
                    <el-dropdown-item>1-3年</el-dropdown-item>
                    <el-dropdown-item>3-5年</el-dropdown-item>
                    <el-dropdown-item>5-10年</el-dropdown-item>
                    <el-dropdown-item>10年以上</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-dropdown>
                <div class="el_dropdown_btn">
                  学历要求<el-icon class="el-icon--right"
                    ><arrow-down
                  /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>不限</el-dropdown-item>
                    <el-dropdown-item>初中及以下</el-dropdown-item>
                    <el-dropdown-item>中专/中技</el-dropdown-item>
                    <el-dropdown-item>高中</el-dropdown-item>
                    <el-dropdown-item>大专</el-dropdown-item>
                    <el-dropdown-item>本科</el-dropdown-item>
                    <el-dropdown-item>硕士</el-dropdown-item>
                    <el-dropdown-item>博士</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-dropdown placement="bottom-start">
                <div class="el_dropdown_btn">
                  公司行业<el-icon class="el-icon--right"
                    ><arrow-down
                  /></el-icon>
                </div>
                <template #dropdown>
                  <ul class="el_dropdown_menu">
                    <li
                      class="el_dropdown_menu_item"
                      v-for="item in companyIndustry"
                      :key="item.id"
                    >
                      <span class="el_dropdown_menu_item_title">{{
                        item.title
                      }}</span>
                      <div class="el_dropdown_menu_item_list">
                        <a
                          class="el_dropdown_menu_item_link"
                          v-for="(value, index) in item.list"
                          :key="index"
                          href="#"
                          >{{ value }}</a
                        >
                      </div>
                    </li>
                  </ul>
                </template>
              </el-dropdown>
              <el-dropdown>
                <div class="el_dropdown_btn">
                  公司规模<el-icon class="el-icon--right"
                    ><arrow-down
                  /></el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>不限</el-dropdown-item>
                    <el-dropdown-item>0-20人</el-dropdown-item>
                    <el-dropdown-item>20-99人</el-dropdown-item>
                    <el-dropdown-item>100-499人</el-dropdown-item>
                    <el-dropdown-item>500-999人</el-dropdown-item>
                    <el-dropdown-item>1000-9999人</el-dropdown-item>
                    <el-dropdown-item>10000以上</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <a href="">清空筛选条件</a>
        </div>
      </div>
    </div>
    <div class="recommend_job_result wrapper">
      <div class="left">
        <ul class="rec_job_list">
          <li
            v-for="item in jobRecommend"
            :key="item.id"
            class="job_card_box"
            @click="changeCardBoxActive(item)"
            :class="{ job_card_box_active: item.active }"
          >
            <div class="job_info">
              <div class="job_title">
                <span class="job_name">{{ item.jobName }}</span>
                <span class="job_salary">{{ item.jobSalary }}</span>
              </div>
              <ul class="job_require">
                <li
                  v-for="(tagItem, index) in item.tagList"
                  :key="index"
                  class="tag_text"
                >
                  {{ tagItem }}
                </li>
              </ul>
            </div>
            <div class="job_card_footer">
              <a href="">
                <img
                  style="height: 24px; width: 24px"
                  :src="item.companyLogo"
                  alt=""
                />
                <span class="company_name">{{ item.companyName }}</span>
              </a>
              <span class="company_location">{{ item.companyLocation }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="right">
        <job-detail :jobContent="currentJob" :city="city"></job-detail>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  position: relative;
  .header {
    height: 88px;
    width: 100%;
    background-color: #fff;
    z-index: 1;
    position: sticky;
    top: 50px;
    .header_continer {
      padding: 5px 0;
      .header_up {
        margin-bottom: 10px;
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        .recommend_title {
          position: relative;
          line-height: 30px;
          font-size: 20px;
          font-weight: 600;
          color: #222;
          cursor: default;
          &::before {
            content: ' ';
            position: absolute;
            left: -4px;
            right: 0;
            bottom: -4px;
            z-index: -1;
            height: 10px;
            background: linear-gradient(90deg, #048eff, #fff2e6);
            border-radius: 5px;
          }
        }
        .recommend_job_btn {
          margin-left: 40px;
          cursor: pointer;
          .content_text {
            font-size: 16px;
            color: #666;
            line-height: 22px;
            &:hover {
              color: #6f9edf;
            }
          }
        }
        .expect_btn {
          display: flex;
          align-items: center;
          margin-left: 40px;
          padding: 8px 12px;
          border-radius: 5px;
          font-size: 16px;
          color: #666;
          line-height: 22px;
          cursor: pointer;
          &:hover {
            background-color: #e4f3ff;
            color: #6f9edf;
          }
        }
        .search_expand_btn {
          display: flex;
          align-items: center;
          position: absolute;
          right: 0;
          border-radius: 5px;
          padding: 6px 12px;
          background: #e4f3ff;
          cursor: pointer;
          .btn_text {
            color: #6f9edf;
          }
        }
      }
      .header_down {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        .header_down_left {
          display: flex;
          .city_label {
            margin-right: 20px;
            display: flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 5px;
            background: #e4f3ff;
            cursor: pointer;
            .city_name {
              color: #6f9edf;
            }
          }
          .el_drowdown_list {
            display: flex;
            align-items: center;
            .el-dropdown:not(:last-child) {
              margin-right: 20px;
            }
            .el-dropdown {
              .el_dropdown_btn {
                display: flex;
                align-items: center;
                padding: 8px 12px;
                border-radius: 5px;
                color: #222;
                outline: none;
                &:hover {
                  background: #e4f3ff;
                }
              }
            }
          }
        }
        a {
          color: #999;
          &:hover {
            color: #6f9edf;
          }
        }
      }
    }
  }
  .recommend_job_result {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    .left {
      width: fit-content;
      .rec_job_list {
        .job_card_box {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 16px 20px;
          border-radius: 10px;
          width: 384px;
          height: 140px;
          background-color: #fff;
          &:hover {
            box-shadow: 0 20px 16px 0 hsla(0, 0%, 70.2%, 0.2);
            .job_info > .job_title > .job_name {
              color: #6f9edf;
            }
          }
          .job_info {
            width: 100%;
            .job_title {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .job_name {
                font-size: 16px;
                font-weight: 500;
                line-height: 22px;
                color: #222;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .job_salary {
                font-size: 20px;
                font-family: kanzhun-mix, kanzhun-Regular;
                font-weight: 500;
                color: #fe574a;
                line-height: 24px;
                height: 24px;
                // flex-shrink: 0;
              }
            }
            .job_require {
              margin-top: 5px;
              display: flex;
              overflow: hidden;
              .tag_text {
                border-radius: 4px;
                font-size: 13px;
                padding: 2px 8px;
                background-color: #ededed;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #666;
              }
              .tag_text:not(:last-child) {
                margin-right: 10px;
              }
            }
          }
          .job_card_footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            a {
              display: flex;
              align-items: center;
              .company_name {
                margin-left: 10px;
                font-size: 13px;
                color: #666;
                line-height: 18px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .company_location {
              font-size: 13px;
              color: #666;
              line-height: 18px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .job_card_box:not(:last-child) {
          margin-bottom: 20px;
        }
      }
    }
    .right {
      position: sticky;
      top: 153px;
      width: 784px;
      height: fit-content;
      z-index: 106;
    }
  }
  .job_card_box_active {
    border: 1px solid rgba(124, 187, 255, 0.8);
    box-shadow: 0 20px 16px 0 hsla(0, 0%, 70.2%, 0.2);
  }
}
.el_dropdown_menu {
  padding: 10px 20px;
  height: 220px;
  .el_dropdown_menu_item {
    display: flex;
    padding-bottom: 20px;
    * {
      color: #606266;
      font-size: 14px;
    }
    .el_dropdown_menu_item_title {
      width: 100px;
      margin-right: 50px;
      white-space: nowrap;
    }
    .el_dropdown_menu_item_list {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-column-gap: 50px;
      grid-row-gap: 20px;
      .el_dropdown_menu_item_link {
        width: 100px;
        white-space: nowrap;
        &:hover {
          color: #409eff;
        }
      }
    }
  }
}
//下拉菜单背景色
.el-dropdown {
  border-radius: 5px;
  background-color: #f7f7f7;
}
//下拉菜单悬停文字色
.main
  .header
  .header_continer
  .header_down
  .header_down_left
  .el_drowdown_list
  .el-dropdown
  .el_dropdown_btn {
  &:hover {
    color: #409eff;
  }
}
//下拉菜单项宽度
.el-dropdown-menu {
  width: 100px;
}
</style>
